<template>
	<view class="wrap">
		<view class="nav-wrap" v-if="type!='afterSale'">
			<!-- <u-tabs-swiper activeColor="#09C15F" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper> -->
			<u-tabs item-width="140" :list="list" active-color="#09C15F" :is-scroll="true" @change="change" inactive-color="#606266" font-size="30" :current="current"></u-tabs>
		</view>
		<view style="width: 100vw;height: 80rpx;" v-if="type!='afterSale'"></view>
		<view class="swiper-item">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
				<view class="page-box">
					<view class="order" v-for="(res, index) in orderList" :key="res.id" @click="toOrderDetail(res.order_num)">
						<view class="top">
							<view class="left">
								<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
								<view class="store">{{ res.merchant_name }}</view>
								<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
							</view>
							<view class="right">{{ res.status_name }}</view>
						</view>
						<view class="item" v-for="(item, index) in res.order_items" :key="index">
							<view class="left"><image :src="item.medicine_info.thumb_url"></image></view>
							<view class="content">
								<view class="title u-line-2">{{ item.medicine_info.name }}</view>
								<!-- <view class="type">{{ '6*12g' }}</view> -->
								<!-- <view class="delivery-time">发货时间</view> -->
							</view>
							<view class="right">
								<view class="price">
									￥{{item.total_amount}}
								</view>
								<view class="number">x{{ item.num }}</view>
							</view>
						</view>
						<view class="total">
							共{{res.order_items.length}}件商品 合计:
							<text class="total-price">
								￥{{res.pay_amount}}
							</text>
						</view>
						<view class="bottom">
							<!-- <view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view> -->
							<!-- <view class="logistics btn">查看物流</view> -->
							<!-- <view class="exchange btn">卖了换钱</view>
							<view class="evaluate btn">评价</view> -->
						</view>
					</view>
					<view class="null">
						<u-loadmore bg-color="#f2f2f2;" color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <swiper-item class="swiper-item">
			<scroll-view scroll-y style="height: 100%;width: 100%;">
				<view class="page-box">
					<view>
						<view class="centre">
							<image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image>
							<view class="explain">
								您还没有相关的订单
								<view class="tips">可以去看看有那些想买的</view>
							</view>
							<view class="btn">随便逛逛</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</swiper-item> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [],
			list: [
				{name: '全部',status: ''},
				{name: '待支付',status: 1},
				{name: '待发货',status: 2},
				{name: '待收货',status: 3},
				{name: '已完成',status: 4},
				{name: '已取消',status: 6}],
			current: 0,
			swiperCurrent: 0,
			dx: 0,
			loadingStatus: 'loading',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			page: 1,
			total: '',
			status: '',
			type: ''
		};
	},
	onShow() {
		this.getMyOrderList();
	},
	onLoad(options) {
		if(options.index){
			this.current = options.index;
			this.status = options.index;
			
			if(options.index=='9'){
				this.type = 'afterSale'
			} else{
				this.type = ''
			}
			
		}
	},
	onReachBottom() {
		if(this.loadingStatus=="loading"||this.total==this.orderList.length){
			return
		}
		this.page = this.page+1;
		this.getMyOrderList();
	},
	methods: {
		//获取订单列表
		async getMyOrderList(){
			wx.showLoading({
				title: '加载中',
			})
			this.loadingStatus = 'loading';
			let userToken = wx.getStorageSync('userToken');
			let res=await this.$api.getMyOrderList({
				page: this.page,
				limit: 10,
				status: this.status,
				user_token: userToken
			},this.$baseUrl);
			wx.hideLoading()
			if (res.data.level == 'success'){
				if(this.page == 1){
					this.orderList = res.data.data;
				} else{
					if(res.data.data.length == 0){
					    this.page--;
					} else{
					    this.orderList = this.orderList.concat(res.data.data)
					}
				}
				this.total = res.data.page_info.total;
			}
			//loading状态
			if(this.orderList.length==this.total){
				this.loadingStatus = 'nomore'
			} else{
				this.loadingStatus = 'loadmore'
			}
		},
		
		//跳转商品详情页面
		toOrderDetail(orderNum){
			wx.navigateTo({
				url: '../orderDetail/orderDetail?num='+orderNum
			})
		},
		
		reachBottom() {
			if(this.orderList.length==this.total){
				return;
			}
			if(this.loadingStatus=='loading'){
				return;
			}
			this.page++;
			this.orderList();
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
			this.current = index;
			this.page = 1;
			this.status = this.list[index].status
			/* if(index==0){
				this.status = '';
			} else{
				this.status = index;
			} */
			this.getMyOrderList();
		},
		/* transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		} */
	}
};
</script>

<style>
	::-webkit-scrollbar {  
	    display: none;  
	    width: 0 !important;  
	    height: 0 !important;  
	    -webkit-appearance: none;  
	    background: transparent;  
	}
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style scoped>
	/deep/ .u-more{
		border-bottom: none;
	}
</style>

<style lang="scss" scoped>

.nav-wrap{
	position: fixed;
	left: 0;
	right: 0;
	width: 100vw;
	z-index: 99;
}

.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #222222;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: auto;
			padding-top: 20rpx;
			text-align: right;
			min-width: 60px;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	width: 100%;
	min-height: 100vh;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
